<template>
  <div id="bodyContainer" />
</template>

<script setup lang="ts">
  import { onMounted } from 'vue'
  import { renderAsync } from 'docx-preview'
  import { ElMessage } from 'element-plus'

  defineOptions({ name: 'WordPreview' })

  interface Props {
    url: string
  }

  const props = defineProps<Props>()

  const docxOptions = {
    className: 'ZhouWei666', // string：默认和文档样式类的类名/前缀
    inWrapper: false, // boolean：启用围绕文档内容的包装器渲染
    ignoreWidth: true, // boolean：禁用页面的渲染宽度
    ignoreHeight: false, // boolean：禁止渲染页面高度
    ignoreFonts: true, // boolean：禁用字体渲染
    breakPages: false, // boolean：在分页符上启用分页
    ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页
    experimental: false, // boolean：启用实验功能（制表符停止计算）
    trimXmlDeclaration: true, // boolean：如果为true，解析前会从 xml 文档中移除 xml 声明
    useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
    useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
    showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
    debug: false, // boolean：启用额外的日志记录
  }

  const handlePreview = async () => {
    try {
      const response = await fetch(props.url)
      if (!response.ok) {
        ElMessage.error('申请表云文件丢失！')
        throw new Error('Failed to fetch file')
      }
      const data = await response.blob()
      const bodyContainer = document.getElementById('bodyContainer')

      await renderAsync(
        data, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
        bodyContainer, // HTMLElement 渲染文档内容的元素,
        null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
        docxOptions, // 配置
      )

      const el = document.querySelector('.ZhouWei666')
      if (el) {
        ;(el as HTMLElement).style.padding = '30px' // 强制设置
      }
    } catch (error) {
      ElMessage.error('文件加载失败')
      throw error
    }
  }

  onMounted(() => {
    handlePreview()
  })
</script>

<style scoped>
  :deep(.ZhouWei666[style]) {
    padding: 30px !important;
  }
</style>
